<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册-迅泊达</title>
    <link rel="shortcut icon" href="/static/favicon.ico"/>
    <link rel="stylesheet" href="/static/front/fonts/iconfont.css">
    <link rel="stylesheet" href="/static/front/css/base_new.css">
    <link rel="stylesheet" href="/static/front/css/library.css">
    <link rel="stylesheet" href="/static/front/css/style.css">
    <script src="/static/front/js/jquery-1.11.1.min.js"></script>
    <script src="/static/front/js/jquery.countdown.js"></script>
    <script src="/static/front/js/js.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/front/js/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script type="text/javascript" src="plugIn/PIE.js"></script>
    <![endif]-->
</head>
<body>
<div class="content">
    <div id="top">
        <div  class="cnt">
            <p class="fl">
                <span>客服热线：400-880-7023</span>
                <a href="http://crm2.qq.com/page/portalpage/wpa.php?uin=4008807023&aty=0&a=0&curl=&ty=1" target="_blank;">在线客服</a>
            </p>
            <ul class=" listUl fr">
            	<li><a href="/index" class="returnIndex">返回首页</a></li>
                <#if _user?exists>
	        		<li>您好，<a href="/account/info" class="orange">${_user.username}</a></li>
	        		<li><a href="/logout">退出</a></li>
	        	<#else>	
	            <li class=""><a href="/login" class="orange">请登录</a></li>
	            <li class=""><a href="/register">免费注册</a></li>
	            </#if>
                <li class="login">您好，<a href="#" class="orange">fsdfsds</a></li>
                <li class="login"><a href="/logout">退出</a></li>
        		<li><a href="/activityCenter">活动中心</a></li>
                <li class="last"><a href="/help">帮助中心</a></li>
            </ul>
        </div>
    </div>
    <div id="nav">
        <div class="cnt ">
            <div class="logo fl logoNoText clearfix"><a href="/index" class="fl">迅泊达-信泊海内、诚达天下</a> <span class="fr" style="font-size:25px;">欢迎注册</span></div>
        </div>
    </div>
    <div class="cnt userMain clearfix regsiterTab">
       <div class="fl user">
           <span class="phoneRegsiter regsiter active">手机注册</span>
           <!--<span class="mailRegsiter regsiter">邮箱注册</span>-->
           <form class="userFrom registerform" method="post">
               <div class="phone clearfix FU">
                   <label for="phone" class="fl"><em>*</em> 手机号：</label>
                   <input class="fl" type="text" id="phone" placeholder="请输入手机号" name="phone">
                   <p class="msg fl"></p>
               </div>
               <div class="picCode clearfix FU">
                   <label for="picCodePhone" class="fl" ><em>*</em> 验证码：</label>
                   <input type="text" id="picCodePhone" class="fl code" placeholder="请输入验图片证码" name="captcha">
                   <span class="verificationCode fl"><img src="/admin/captcha" id="imgCode" title="点击刷新" width="100px" height="34px" onclick="javascript:this.src='/admin/captcha?'+new Date()*1" style="cursor:pointer"></span>
               </div>
               <div class="SMSCode clearfix FU">
                   <label for="SMSCodePhone" class="fl"><em>*</em> 短信验证码：</label>
                   <input type="text" id="SMSCodePhone" class="fl code" placeholder="请输入短信验证码" style="background:none;">
                   <span class="verificationCode fl textCode codeBtn" id="sendCode">获取验证码</span>
               </div>
               <div class="userName clearfix FU">
                   <label for="userNamePhone" class="fl"><em>*</em> 用户名：</label>
                   <input type="text" id="userNamePhone" class="fl" placeholder="请设置用户名" name="username">
                   <p class="msg fl"></p>
               </div>
               <div class="password setPassword clearfix FU">
                   <div class="clearfix">
                       <label for="passwordPhone" class="fl"><em>*</em> 请设置密码：</label>
                       <input type="password" id="passwordPhone" class="fl" placeholder="请输入6-16位数密码" name="password">
                       <p class="msg fl"></p>
                   </div>
                   <div class="grade">
                       	密码强度：
                       <u>弱</u>
                       <u>中</u>
                       <u>强</u>
                   </div>
               </div>
               <div class="confirmPassword clearfix FU last" >
                   <label for="confirmPasswordPhone" class="fl"><em>*</em> 请确认密码：</label>
                   <input type="password" id="confirmPasswordPhone" class="fl" placeholder="请再次输入密码" name="passwordOk">
                   <p class="msg fl"></p>
               </div>
               <div class="clearfix FU last" style="margin-top:24px;">
                   <label for="confirmPasswordPhone" class="fl"> 邀请码：</label>
                   <input type="text" id="inviteCode" class="fl" placeholder="请输入邀请码" name="inviteCode" style="background:none;"  value=<#if invitePhone??>${invitePhone}</#if> >
                   <p class="msg fl"></p>
               </div>
               <p class="agreement"><input type="checkbox" checked="true" name="agree" value="yes"> 我已阅读并且同意迅泊达的 <a href="/protocol" target="_blank">《使用协议》</a></p>
               <input class="regsiterBtn" type="button" value="立 即 注 册" style="font-size:21px;cursor:pointer;" id="submit">
               <p class="regsiterlogin">我已注册，现在就 <a href="/login">登录</a></p>
           </form>
          
       </div>
        <div class="pic fr">
            <img src="${_front_images}/AppIcon.gif" alt="">
        </div>
    </div>
    <div class="userFooter"><em class="iconfont">&#xe602;</em>2013 XUNBODA | 武汉迅泊达金融服务有限公司 | 鄂ICP备13010359</div>
</div>
</body>
<script type="text/javascript" src="${_front_js}/layer/layer.js" ></script>
<script>
$("#sendCode").click(sendSms);
function sendSms() {
	var phone = $("#phone").val();
	var captcha =$("#picCodePhone").val();
	if(phone == "") {
		layer.alert("手机号不能为空");
		return;
	}
	if(captcha == "") {
		layer.alert("验证码不能为空");
		return;
	}
	$.ajax({
		type: 'POST',
        url:  '/code/sendSms?type=register',
        data: {
			phone:phone,
			captcha:captcha
        },
        async: false,
        success: function(result) {
        	if(result.code == -1){
        		layer.alert(result.msg);
				$(".textCode").unbind("click",sendSms);//去掉单击事件
				$(".textCode").css("cursor","default");//修改鼠标样式
				time();
        	}else{
        	   if(result.code == 2){
        	      layer.confirm(result.msg,{btn: ['立即登录','确定']}
        	        ,function(){
        	         window.location.href="/login";
        	        });
        	      return;
        	     }
        		$("#imgCode").click();
				layer.alert(result.msg);
        	}
        }
    });
}
//计时函数
var sleep = 60;
var wait = sleep;
var timeOut;
function time() {
	if (wait == 0) {
		clearTimeout(timeOut);
		wait = sleep;
		$(".textCode").text("获取验证码");
		$(".textCode").click(sendSms);//重新绑定函数
		$(".textCode").css("cursor","pointer");//修改鼠标样式
	} else {
		$(".textCode").text(wait + "秒后获取");
		wait--;
		timeOut = setTimeout(function() {
			time();
		}, 1000);
	}
}
$("#submit").click(registerSave);
function registerSave(){
	var phone = $("#phone").val();
	var captcha =$("#picCodePhone").val();
	var code = $("#SMSCodePhone").val();
	var username = $("#userNamePhone").val();
	var password = $("#passwordPhone").val();
	var passwordOk = $("#confirmPasswordPhone").val();
	var agree = $("input[name='agree']:checked").val();
	var inviteCode = $("#inviteCode").val();
	if(agree == "") {
		layer.alert("请勾选《使用协议》");
		return;
	}
	if(phone == "") {
		layer.alert("手机号不能为空");
		return;
	}
	if(captcha == "") {
		layer.alert("验证码不能为空");
		return;
	}
	if(code == "") {
		layer.alert("手机验证码不能为空");
		return;
	}
	if(username == "") {
		layer.alert("用户名不能为空");
		return;
	}
	if(username.length > 11 || username.length < 4) {
		layer.alert("用户名为4-11个字符");
		return;
	}
	if(password == "") {
		layer.alert("密码不能为空");
		return;
	}
	if(passwordOk == "") {
		layer.alert("确认密码不能为空");
		return;
	}
	if(passwordOk != password) {
		layer.alert("两次输入的密码不一致");
		return;
	}
	$.ajax({
		type: 'POST',
        url:  '/register/save',
        data: {
			phone:phone,
			captcha:captcha,
			code:code,
			username:username,
			password:password,
			passwordOk:passwordOk,
			agree:agree,
			inviteCode:inviteCode
        },
        async: false,
        success: function(result) {
        	if(result.code == -1){
        		registerSuccess();
        	}else{
        		$("#imgCode").click();
				layer.alert(result.msg);
        	}
        }
    });
}
function registerSuccess(){
	var htmlStr = '<div style="height:200px;width:360px;">';
	htmlStr += '<div style="padding-top:17px;padding-left:48px;">';
	htmlStr += '<p style="margin-bottom:19px;font-size:26px;font-weight:600;margin-left:33px;">恭喜您注册成功！</p>';
	htmlStr += '<p style="margin-top:36px;"><span  style="font-size:12px;color:#757272;"><span id="_time">5</span>秒钟后页面自动跳转，也可点击下面链接直接跳转</span></p>';
	htmlStr += '<a href="/login" style="text-decoration:none;color:#396487;font-size:12px;display:block;margin-left:102px;margin-top:36px;">点击跳转</a>';
	htmlStr += '</div>';
	htmlStr += '</div>'; 
	layer.open({
	  type: 1,
	  title: false,
	  closeBtn: 0,
	  shadeClose: true,
	  skin: 'yourclass',
	  content: htmlStr
	});
	
	var time = 4;
	setInterval(function(){
		$('#_time').text(time);
		time--;
		if(time < 0){
			console.log(time);
			window.location.href="/login";
		}
	},1000);
}
//用户名检测
$("#userNamePhone").blur(function(){
	var reName = /[^\w\u4e00-\u9fa5]/g;  //不分中英文4-11
	var username = $(this).val();
	var $this = $(this);
	if($this.val() == ''){
	    $this.siblings('p').html( '<i class="error"></i>用户名不能为空' );
	    return;
	}
	if(reName.test($(this).val())){
		$this.siblings('p').html( '<i class="error"></i>用户名含有非法字符，请重新输入' );
		return;
	}
	if($this.val().length < 4){
		$this.siblings('p').html( '<i class="error"></i>用户名不能少于4个字符' );
		return;
	}
	if($this.val().length >11 ){
	    $this.siblings('p').html( '<i class="error"></i>用户名不能高于11个字符' );
	    return;
	}
	$.ajax({
		type: 'POST',
	    url:  '/check/username',
	    data: {
			username:username
	    },
	    async: false,
	    success: function(result) {
	    	if(result.code != -1){
	    		$this.siblings('p').html( '<i class="error"></i>用户名已存在' );
	    	}else {
				$this.siblings('p').html( '<i class="success"></i>' );
	        }
		}
	});
});
</script>
</html>